<template>
  <div>
    <h4>发表评论-{{ newsid }}</h4>
    <hr />
    <textarea
      placeholder="说点什么吧(最多120字)"
      maxlength="120"
      v-model.trim="cmt"
      @keyup.enter="postComment"
    ></textarea>
    <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
    <!-- 品论列表 -->
    <div class="cmt-list">
      <div class="cmt-item" v-for="(v, i) in commentList" :key="i">
        <div class="cmt-title">
          第{{ i + 1 }}楼&nbsp;用户:&nbsp;{{ v.user_name }}&nbsp;发表时间:
          {{ v.add_time | dateFormat }}
        </div>
        <div class="cmt-body">{{ v.content }}</div>
      </div>
    </div>
    <mt-button type="danger" size="large" plain @click="loadMore">加载更多</mt-button>
  </div>
</template>

<script>
// 导入MintUI提示框组件
import { Toast } from "mint-ui"
export default {
  // 接收父组件传递过来的id
  props: ["newsid"],
  created() {
    this.getCommentById()
  },
  data() {
    return {
      // 默认显示第一页的评论
      page: 1,
      commentList: [],
      // 评论内容
      cmt: "",
    }
  },
  methods: {
    // 一、通过id获取评论列表
    async getCommentById() {
      // 1.1 发送请求
      const { data } = await this.$http.get(
        `/api/getcomments/${this.newsid}?pageindex=${this.page}`
      )
      // 1.2 把获取到的数据进行赋值
      // if (data.status === 0) return (this.commentList = data.message)

      // 1.3 改造后的写法,直接合并获取到新数据
      if (data.status === 0)
        return (this.commentList = this.commentList.concat(data.message))
    },

    // 二、点击加载更多评论功能
    // 2.1 新增一个加载更多的方法
    loadMore() {
      // 2.2 点击按钮后加载下一页的内容
      this.page++
      // 2.3 重新发送请求 --> 只显示下一页的内容,此时需要改造渲染评论列表的方法
      this.getCommentById()
    },

    // 三、发表评论功能
    async postComment() {
      // 3.1 非空校验
      if (!this.cmt) return Toast("请输入内容")
      // 3.2 发送请求
      const { data } = await this.$http.post(`/api/postcomment/${this.newsid}`, {
        content: this.cmt,
      })
      // console.log(data)
      if (data.status === 0) {
        // 3.3 请求成功后将创建一个新的数据直接添加到数组的最前面
        this.commentList.unshift({
          user_name: "匿名用户",
          add_time: new Date(),
          content: this.cmt,
        })
        // 3.4 清空文本域内容
        this.cmt = ""
      }
    },
  },
}
</script>

<style lang="scss" scoped>
textarea {
  font-size: 14px;
  margin: 0;
}
.cmt-list {
  margin: 5px 0;
  .cmt-item {
    line-height: 30px;
    .cmt-title {
      background-color: #ddd;
      font-size: 14px;
    }
    .cmt-body {
      text-indent: 1em;
      font-size: 13px;
    }
  }
}
</style>
